<!DOCTYPE html>
<html>
<head>
    <% include ../include/css_header.html %>
    <style>
        .faction{
            margin-top: 15px;
            padding-left: 60px;
            position: relative;
        }
        .faction .tag{
            position: relative;
            top: -3px;
        }
        .faction .bottom{
            margin-top: 5px;color: #666;
        }
        .faction .b_left{
            float: left;width: 70%;
        }
        .faction .b_right{
            float: left;width: 30%;text-align: right;
        }
        .faction-logo{
            position: absolute;
            left: 5px;
        }
        .faction-logo img{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body class="actlist_bg">
    <div class="container" style="min-height:640px">
        <% include ../include/top_bar.html %>
        <div class="row">
            <div style="height: 10px;"></div>
            <div class="col-xs-12 font_shadow_133000" style="color: #ffffff;text-align: center">
                <h3><strong>我的圈子</strong></h3>
            </div>
        </div>
        <div class="row" style="margin: 10px 0 20px;">
            <%
               var factionSize = factions.length;
               if(factionSize > 0){ %>
            <div class="col-xs-12 bg_op_panel faction_list" style="min-height: 400px;">
            <%   for(var i=0; i< factionSize; i++){
                    var faction = factions[i];
            %>
                <div class="bg_white_panel faction" data-id="<%=faction.id %>">
                    <div class="faction-logo">
                        <img src="/flogo/<%=faction.id %>.jpg" alt="1" class="img-circle" onError="this.src='/img/<%=faction.creator.id %>';"/>
                    </div>
                    <div>
                        <strong class="font_size_16 faction_name" data-id="<%=faction.id %>"><%=faction.name %></strong>
                        <% for(var j=0,taglen=faction.tags.length; j< taglen; j++){
                            var tag = faction.tags[j]; %>
                        <span class="label label-primary tag"><%=tag %></span>
                        <% } %>
                    </div>
                    <div class="bottom">
                        <div class="b_left">
                            <!--<span style="color: #999999;">创始人</span>:-->
                            <span data-id="">
                               <!-- <img class="img-rounded size_20" src="/img/<%=faction.creator.id %>" />-->
                                <%=faction.creator.name %>
                            </span>
                        </div>
                        <div class="b_right">
                            <span class="icon-user"></span>
                            <%=faction.memberCount %>
                            <span class="icon-feather"></span>
                            <%=faction.actCount %>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            <% } %>
                <div class="col-xs-12" style="height: 10px;"></div>
                <button type="button" class="btn btn-success btn-block" id="createFactionBtn">
                    <i class="icon-picassa"></i>
                    创建一个圈子
                </button>
            </div>
            <% }else{ %>
            <div class="col-xs-12" style="min-height: 410px;">
                <div class="jumbotron" style="margin-top: 30px;">
                    <h1>圈子，是一种能量。</h1>
                    <p>它聚集智慧、传承信仰</p>
                    <p>...</p>
                    <p style="text-align: center">
                        <a class="btn btn-success btn-lg" role="button" id="createFactionBtn">创建圈子</a>
                    </p>
                </div>
            </div>
            <% } %>
        </div>
        <% include ../include/copyright.html %>
    </div>
<% include ../include/slide_menu.html %>
<% include ../include/js_footer.html %>
<script type="text/javascript">
    $(function(){
        $('nav#menu_left').mmenu();
        $('#createFactionBtn').on('click', function(){
            window.location.href='/newfaction';
        });
        $('.faction_list').on('click', '.faction_name, .faction', function(e){
            var id = $(this).attr('data-id');
            window.location.href = '/faction/'+id;
        })
    })
</script>
</body>
</html>